<template>
  <div id="banner">
    <div class="swiper-container1" v-if="showSwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for='item of swiper' :key='item.id'>
          <img :src='item.imgUrl' alt=''>
        </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min'
export default {
  name: 'Banner',
  props: {
    swiper: Array
  },
  data () {
    return {
      mySwiper: null
    }
  },
  computed: {
    showSwiper () {
      // console.log(this.swiper.length)
      return this.swiper.length
    }
  },
  watch: {
    swiper () {
      // 解决swiper 4显示不出分页器问题
      if (this.swiper.length) {
        this.$nextTick(() => {
          this.mySwiper = new Swiper('.swiper-container1', {
            centerSlides: true,
            loop: true,
            loopedSlides: 5,
            slidesPerView: 'auto',
            autoplay: { // 自动切换
              disableOnInteraction: false // 用户操作swiper之后,是否禁止autoplay.默认为true:停止
            },
            centeredSlides: true,
            initialSlide: 0,
            watchSlidesProgress: true,
            pagination: {
              el: '.swiper-pagination',
              clickable: true
            },
            on: {
              progress (progress) {
                for (let i = 0; i < this.slides.length; i++) {
                  let slide = this.slides.eq(i)
                  let slideProgress = this.slides[i].progress
                  if (Math.abs(slideProgress) > 1) {
                    var modify = (Math.abs(slideProgress) - 1) * 0.4 + 1
                  }
                  let translate = slideProgress * modify * 50 + 'px'
                  let scale = 1 - Math.abs(slideProgress) / 5
                  let zIndex = 999 - Math.abs(Math.round(10 * slideProgress))
                  slide.transform('translateX(' + translate + ') scale(' + scale + ')')
                  slide.css('zIndex', zIndex)
                  slide.css('opacity', 1)
                  if (Math.abs(slideProgress) > 3) {
                    slide.css('opacity', 0)
                  }
                }
              },
              setTransition (transition) {
                for (let i = 0; i < this.slides.length; i++) {
                  let slide = this.slides.eq(i)
                  slide.transition(transition)
                }
              }
            }
          })
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  #banner{
    padding: 40px 0;
    background #fff
    position relative

  }
  .swiper-slide{
    width: 400px;
    height: 230px;
    img {
      width 100%
      height 100%
    }
  }
  .banner_page{
    margin: 20px auto;
    left: 0;
    right: 0;
  }
  .banner_page span{
    margin: 0 10px;
  }
  h2{
    text-align: center;
  }
  .swiper-pagination-bullet-active{
    width: 16px;
    border-radius: 8px;
  }
  .swiper-container1 >>> .swiper-pagination-bullet-active
    background: green!important
    opacity 1!important
  .swiper-container1 >>> .swiper-pagination-bullet
    opacity .6
    width 30px
    height 7px
    background gray
    border-radius 0

</style>
